<template>
  <div class="zlcChangeBase" v-show="showModel">
      <div class="mark" data-remark="true" @click="closeModel">
          <div class="main">
              <div class="unit">
                  <div class="title">
                      <div class="titleText">
                          <img src="/src/assets/titleIcon.png" alt="" class="titleIcon">
                          <span>
                        单位选择
                    </span>
                      </div>
                      <span class="closeIcon" data-remark="true" @click="closeModel">
                    X
                </span>
                  </div>
                  <div class="zlcAtree">
                      <div class="treeBorder">
                          <a-tree
                              showLine
                              showIcon
                              :auto-expand-parent="true"
                              :fieldNames="fieldNames"
                              :tree-data="treeData"
                              v-model:selectedKeys="selectedKeys"
                              @select="selectTree"
                          >
                              <template #icon="{ key, selected }">
                                  <img src="/src/assets/unit.png" alt="" class="icon">
                              </template>
                          </a-tree>
                      </div>

                  </div>

              </div>
              <div :class="['base', baseModel ? 'on' : 'off']">
                  <div class="title">
                      <div class="titleText">
                          <img src="/src/assets/titleIcon.png" alt="" class="titleIcon">
                          <span>
                        基地选择
                    </span>
                      </div>

                      <span class="closeIcon" @click="closeBaseModel">
                    X
                </span>
                  </div>
                  <div class="bases">
                      <div class="treeBorder">
                          <div :class="['item', nowBase == item.modelDiagramUrl ? 'on' : 'off']" v-for="(item, index) in baseArray" :key="index">
                              <div class="title" :title="item.name || item.departName">
                                  <img src="/src/assets/baseIcon.png" alt="" class="icon">

                                  {{ item.name || item.departName }}
                              </div>
                              <div :class="['type', item.modelDiagramUrl ? 'plance' : 'noPlance']" @click="changeBase(item)">
<!--                                  {{ item.modelDiagramUrl ? '有模型' : '无模型' }}-->
                              </div>
<!--                              <div class="changeBase" v-if="item.modelDiagramUrl" @click="changeBase(item)">-->
<!--                                  切换模型-->
<!--                              </div>-->
                          </div>
                          <zlc-nodata v-if="!baseArray.length">

                          </zlc-nodata>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import { ref } from "vue"
import { getBases, getUnitBase, getUnitIndependentHouse, getIntegratedMeshLayerToken } from "/src/api/api.js"
import ZlcNodata from "../zlcNodata/zlcNodata.vue";
import IntegratedMeshLayer from "@arcgis/core/layers/IntegratedMeshLayer.js";
import SpatialReference from "@arcgis/core/geometry/SpatialReference.js";
import { message } from 'ant-design-vue';
import aes from "../../utils/aes.js";

import TextSymbol from "@arcgis/core/symbols/TextSymbol.js";
import Graphic from "@arcgis/core/Graphic.js";
export default {
    name: "zlcChangeBase",
    components: {ZlcNodata},
    setup(){
        //控制整个model
        let showModel = ref(false)
        //控制基地model
        let baseModel = ref(true)
        //树形配置
        let fieldNames = ref({
            children: 'children',
            title: 'title',
            key: 'key'
        })
        //树形数据
        let treeData = ref([])
        //选中的树形节点
        let selectedKeys = ref([])
        //当前处于哪个基地
        let nowBase = ref('')
        //基地数组
        let baseArray = ref([])
        //获取基地/独立房产
        let getBaseOrIndependentHouse = (item) => {
            let params = Object.assign({sysOrgCode: item.orgCode + '*'}, { pageSize: 10000, pageNo: 1 })
            getUnitBase(params).then(res => {
                baseArray.value = res.result.records
                if(!nowBase.value){
                    nowBase.value = window['3DbaseUrl']
                }
                baseModel.value = true
            })
        }
        let sysOrgCode = window.sysOrgCode
        //获取树形数据
        getBases({}).then(res => {
            //过滤掉其他的 只展示当前级别的树形
            let checked = window.modelTitle
            void function queryKey(array){
                array.forEach(item => {
                    if(item.title == checked){
                        selectedKeys.value = [item.key]
                        treeData.value = [item]
                        //找到该级别的基地 及其他下级的所有基地/独立房产
                        getBaseOrIndependentHouse(item)
                    }else{
                        item.children && queryKey(item.children)
                    }
                })
            }(res.result)
        })

        //选择树形节点
        let selectTree = (selectkeys, { selected, node } = e) => {
            selectedKeys.value = [node.value]
            baseModel.value = true
            //进行查找基地和独立房产
            getBaseOrIndependentHouse(node)
        }

        //展开整个model
        let showBaseModel = () => {
            showModel.value = true
            baseModel.value = true
        }
        //关闭整个model
        let closeModel = ($event) => {
            if($event.target.dataset.remark){
                showModel.value = false
            }
        }

        //关闭基地model
        let closeBaseModel = () => {
            baseModel.value = false
        }

        //获取房屋数据的token
        let getToken = () => {
            return new Promise((resolve, reject) => {
                getIntegratedMeshLayerToken().then(res => {
                    resolve(JSON.parse(res.message).token)
                })
            })

        }


        let addIntegratedMeshLayer = (modelDiagramUrl, modelHeight) => {
            let hide = message.loading('模型加载中...', 0);
            getToken().then(res => {
                setTimeout(() => {
                    let sceneLayer = new IntegratedMeshLayer({
                        url: modelDiagramUrl,
                        apiKey: res,
                        title: "倾斜摄影",
                        spatialReference: new SpatialReference({
                            wkid: 4490
                        }),
                        elevationInfo: {
                            mode: 'absolute-height', // 将倾斜摄影贴着底图
                            // offset: -40 //modelHeight == 0 ? -40 : modelHeight
                        },
                        id: 'IntegratedMeshLayer'
                    });

                    window.map.add(sceneLayer);

                    sceneLayer.when(() => {
                        setTimeout(hide, 1000)
                        window.viewer.goTo({
                            target: sceneLayer.fullExtent,
                            zoom: 18,
                            // heading: 45,
                            tilt: 45  // 设置相机的倾斜角度，以度为单位
                        },{
                            duration: 1500
                        })
                        nowBase.value = modelDiagramUrl

                    }).catch(error => {
                        setTimeout(hide, 500)
                        message.warning('模型加载失败', 2);
                    })
                }, 3000)

            })
        }

        //切换基地
        let changeBase = (item) => {
            if(nowBase.value == item.modelDiagramUrl){

            }else{
                if(!item.modelDiagramUrl) return
                const layerToRemove = window.map.findLayerById("IntegratedMeshLayer");
                if(layerToRemove){
                    window.map.remove(layerToRemove);
                }
                let modelHeight = Number(item.modelHeight)
                addIntegratedMeshLayer(item.modelDiagramUrl, modelHeight)

            } //当前已经处于此基地 无需进行下一步操作
        }

        return {
            showModel,
            baseModel,
            showBaseModel,
            fieldNames,
            treeData,
            closeModel,
            closeBaseModel,
            selectTree,
            selectedKeys,
            baseArray,
            changeBase,
            nowBase
        }
    }
}
</script>
<style lang="less" scoped>
.scrollBarStyle(){
    /* 滚动条优化 start */
    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    /* 无内容时的滚动条样式 */
    &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.1);
    }

    /* 有内容时的滚动条样式 */
    &::-webkit-scrollbar-thumb {
        background: rgb(64, 128, 230);
        border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: rgb(64, 128, 230);
    }

    &::-webkit-scrollbar-corner {
        background: rgba(0, 0, 0, 0.1);
    }

    /* 滚动条优化 end */
}
.zlcChangeBase{
  width: 100%;
  height: 100%;
  position: fixed;
    left: 0;
    top: 0;
  z-index: 999;
    .mark{
        width: 100%;
        height: 100%;
        .main{
            width: fit-content;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            .unit, .base{
                background: url("/src/assets/aTree.png") center center no-repeat;
                background-size: 100% 100%;
                position: relative;
                &::after{
                    width: 100%;
                    height: 100%;
                    content: '';
                    position: absolute;
                    z-index: -1;
                    left: 0;
                    top: 0;
                    background: rgba(0, 0, 0, 0.5);
                }
              .titleText{
                font-family: YouSheBiaoTiHei;
                font-size: 22px;
              }
                .title{
                    width: 100%;
                    height: 40px;
                    padding: 0 10px;
                    box-sizing: border-box;
                    line-height: 40px;
                    display: flex;
                    justify-content: space-between;
                    color: #fff;
                    .closeIcon{
                        width: 40px;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        cursor: pointer;
                    }
                    .titleIcon{
                        width: 21px;
                        height: 13px;
                        margin-right: 10px;
                    }
                }
            }
            .unit{
                width: 400px;
                height: 600px;
                display: inline-block;
                vertical-align: middle;
                overflow-y: auto;

                .zlcAtree{
                    height: calc(100% - 40px);
                    border-image: linear-gradient(to right, transparent 0%, transparent 50%, #3498db 50%, #3498db 100%);
                    border-width: 10px;
                    background-color: transparent; /* 设置一个背景色，使得透明边框更显眼 */
                    padding: 20px 20px 30px 20px;
                    box-sizing: border-box;
                    .treeBorder{
                        width: 100%;
                        height: 100%;
                        overflow-y: auto;
                        padding-right: 10px;
                        box-sizing: border-box;

                        :deep(.ant-tree){
                            width: 100%;
                            height: 100%;
                            background: transparent;
                            .ant-tree-list{
                                .ant-tree-list-holder{
                                    .ant-tree-list-holder-inner{
                                        .ant-tree-treenode{
                                            width: 100%;
                                          height: 30px;
                                            background: rgba(64, 124, 214, .3);
                                            margin-top: 10px;
                                            color: #dcdbdb;
                                            font-size: 16px;
                                            padding: 2px 0;
                                            .ant-tree-iconEle{
                                                display: inline-block;
                                                width: 16px;
                                                height: 16px;
                                                line-height: normal;
                                                margin-right: 8px;
                                                .icon{
                                                    width: 100%;
                                                    height: 100%;
                                                }
                                            }

                                            .ant-tree-switcher-noop{
                                                display: none;
                                            }
                                            &.ant-tree-treenode-selected{
                                                background: rgba(64, 124, 214, 1);
                                                .ant-tree-node-content-wrapper{
                                                    background: transparent;
                                                }
                                            }
                                            .ant-tree-node-content-wrapper{
                                                width: calc(100% - 48px);
                                                overflow: hidden;
                                                white-space: nowrap;
                                                text-overflow: ellipsis;
                                            }
                                            .ant-tree-indent-unit{
                                                &::before{
                                                    border-inline-end: 0px solid #d9d9d9;
                                                }
                                            }
                                        }
                                    }

                                }
                            }
                        }
                        .scrollBarStyle();
                    }

                }

            }
            .base{
                width: 0;
                height: 0;
                display: inline-block;
                vertical-align: middle;
                overflow-x: hidden;
                .bases{
                    width: 100%;
                    height: calc(100% - 40px);
                    color: #fff;
                    padding: 20px 20px 30px 20px;
                    box-sizing: border-box;
                    .treeBorder{
                        width: 100%;
                        height: 100%;
                        overflow-y: auto;
                        padding-right: 10px;
                        box-sizing: border-box;
                        .scrollBarStyle();
                        .item{
                            width: 100%;
                            height: 30px;
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                          justify-content: space-between;
                            font-size: 16px;
                            background: rgba(64, 124, 214, .2);
                            margin-top: 10px;
                            padding: 0 10px;
                            box-sizing: border-box;
                            &.on{
                                background: rgba(64, 124, 214, 1);
                            }
                            .icon{
                                width: 16px;
                                height: 16px;
                            }
                            .title{
                                display: inline-block;
                                flex: 1;
                                height: fit-content;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                line-height: normal;
                                padding: 0;
                            }
                            .type{
                                font-size: 16px;
                                display: inline-block;
                                width: 70px;
                                text-align: center;
                                height: 100%;
                                &.plance{
                                    font-family: OPPOSans;
                                    font-weight: 400;
                                    position: relative;
                                  height: 100%;
                                  display: flex;
                                  flex-direction: row;
                                  align-items: center;
                                  cursor: pointer;
                                  padding: 0 4px;
                                  box-sizing: content-box;
                                  &::after{
                                    width: 100%;
                                    height: 20px;
                                    line-height: 20px;
                                    position: absolute;
                                    top: 50%;
                                    transform: translateY(-50%);
                                    left: 0;
                                    content: '有模型';
                                    color: #eca836;
                                    background: rgba(255, 172, 36, .1);
                                  }
                                  &:hover{
                                    position: relative;
                                    transform: rotateY(360deg);
                                    transition: transform 0.5s linear;
                                    &::after{
                                      width: 100%;
                                      height: 20px;
                                      position: absolute;
                                      top: 50%;
                                      transform: translateY(-50%);
                                      left: 0;
                                      content: '切换基地';
                                      color: #1adeef;
                                      background: none;
                                      text-shadow: 2px 2px 4px #6ae6f1;
                                    }
                                  }
                                }

                                &.noPlance{
                                    font-family: OPPOSans;
                                    font-weight: 400;
                                    color: #AEC3DC;

                                  font-weight: 400;
                                  position: relative;
                                  height: 100%;
                                  display: flex;
                                  flex-direction: row;
                                  align-items: center;
                                  cursor: pointer;
                                  padding: 0 4px;
                                  box-sizing: content-box;
                                  position: relative;
                                  &:after{
                                    width: 100%;
                                    position: absolute;
                                    left: 0;
                                    content: '无模型';
                                    height: 20px;
                                    line-height: 20px;
                                    top: 50%;
                                    transform: translateY(-50%);
                                    background: rgba(174, 195, 220, .2);

                                  }
                                }
                            }
                            .changeBase{
                                flex: 1;
                                text-align: right;
                                font-size: 16px;
                                font-weight: 400;
                                color: #43F0FF;
                                cursor: pointer;
                            }
                        }
                    }
                }
                &.on{
                    width: 400px;
                    height: 600px;
                    transition: width .5s linear;
                    margin-left: 10px;
                    overflow-x: hidden;

                }
                &.off{
                    width: 0px;
                    height: 0px;
                    overflow-x: hidden;
                    transition: width .5s linear;
                }
            }
        }
    }

}
</style>
